<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据表格</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.tableId" filterable clearable placeholder="请选择数据" size="mini"
                        @change="subitTableSelectChange">
                        <el-option v-for="item in mydataTableList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <!-- <el-row type="flex" class="editformitem" align="middle">
          <el-col :span="8" class="editlabel">
            <span>图表标题</span>
          </el-col>
          <el-col :span="16" class="editcontent">
            <input v-model="obj.title" type="text" />
          </el-col>
        </el-row> -->
            <el-row type="flex" class="editformitem" style="margin-bottom:10px;">
                <el-col :span="8" class="editlabel">
                    <span>提交选择列</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-checkbox class="groopitem" style="margin-top:15px;" :indeterminate="obj.tableData.isIndeterminate"
                        v-model="obj.tableData.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-checkbox-group v-model="obj.tableData.checkedColums" @change="handleCheckedCitiesChange">
                        <el-checkbox class="groopitem" v-for="item in columnCheckboxArr" :label="item.id" :key="item.id">
                            {{ item.name }}</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>保存设置</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-radio v-model="obj.tableData.reloadType" :label="0">新增一行</el-radio>
                    <el-radio v-model="obj.tableData.reloadType" :label="1">修改最新行</el-radio>
                </el-col>
            </el-row>
            <title-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"
                :setFontStyle="setFontStyle" :isShowCheckout="false"></title-form>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
// import { GetWriteColumnList } from "@/api/dataTable";

export default {
    name: "SubmitFileForm",
    components: {
        BoxForm: () => import('../mixin/BoxForm.vue'),
        TitleForm: () => import('../mixin/TitleForm.vue'),
    },
    props: {
        obj: Object,
        predefineColors: Array,
        mydataTableList: Array,
        columnCheckboxArr: Array,
        setColorChange: Function,
        setFontStyle: Function,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {
        // 提交列表选择
        subitTableSelectChange(e, index) {
            if (e) {
                this.columnCheckboxArr = [];
                this.columnCheckboxIds = [];
                this.obj.tableData.checkedColums = [];
                if (this.obj.tableData && this.obj.tableData.tableId) {
                    GetWriteColumnList({ id: this.obj.tableData.tableId }).then((res) => {
                        var columnData = res.data.data.data;
                        this.columnCheckboxArr = columnData.map((e) => {
                            return { name: e.name, title: e.title, id: e.id };
                        });
                        this.columnCheckboxIds = columnData.map((e) => {
                            return e.id;
                        });
                    });
                }
            }
        },
        handleCheckAllChange(val) {
            this.obj.tableData.checkedColums = val ? this.columnCheckboxIds : [];
            this.obj.tableData.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.obj.tableData.checkAll =
                checkedCount === this.columnCheckboxIds.length;
            this.obj.tableData.isIndeterminate =
                checkedCount > 0 && checkedCount < this.columnCheckboxIds.length;
        },
    }
}
</script>